<template>
  <div class="markdown">
      <div class="container">
          <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px"/>
      </div>
  </div>
</template>

<script>
  import {originateAct,uploadPic,editActTag,loadAllTags,newTagI} from '../api/basisMG'
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'

  export default {
      name: "markdown",
      props: {
          'text':String
    },    
      components: {
          mavonEditor,
      },
      data() {
          return {
              content:'',
              html:'',
              configs: {}
          }
      },
      watch: {
          'content':{
            handler:function(){
                this.$emit('change',this.content);
            }
          }
      },
      methods: {
          // 将图片上传到服务器，返回地址替换到md中
          $imgAdd(pos, $file){
              var fd = new FormData()
              var str = "http://circlepro.cn/media/"
              fd.append('pic', $file) // 添加到请求体
              uploadPic(fd)
              .then(res=>{
                console.log(res)
                this.$refs.md.$img2Url(pos, str+res.data);
              })
          },
          // 所有操作都会被解析重新渲染
          change(value, render){
              // render 为 markdown 解析后的结果[html]
              this.html = render;
              
          },
          // 提交
          submit(){
              console.log(this.content);
              console.log(this.html);
              this.$message.success('提交成功，已打印至控制台！');
          }
      },
      created(){

      },
      mounted() {
        this.content = this.text
      }
  }
</script>
